<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./main.css">
  <link rel="stylesheet" href="./component/header/main.css">
  <link rel="stylesheet" href="./component/banner/main.css">
  <!-- banner下的商品展示 -->
  <link rel="stylesheet" href="./component/productShow/main.css">

  <link rel="stylesheet" href="./component/banner/forum-select.css">

  <link rel="stylesheet" href="./component/banner/hot-product.css">
  <!--购物车 -->
  <link rel="stylesheet" href="./component/shopCart/shopCart.css">
  <!--footer-->
  <link rel="stylesheet" href="./component/footer/footer.css">
  <title>计算机222电商网站</title>
</head>
<body>
  <!-- 内容 -->
  <div class="container">
    <!-- 购物车 -->
    <div class="shop-cart">
      <div class="shop">
          <img src="./image/shop.svg" alt="购物车图标" style="width: 50px; height: 50px;">
      </div>
      <div class="shop-list">
        <!-- 关闭按钮 -->
        <span id="close">&times;</span>
        <div class="shop-item">
          <div class="shop-item-left">
            <span>购物车</span>
          </div>
          <div class="shop-item-right">
            <label class="checkbox-container">
              <input type="checkbox" id="selectAllCheckbox"> 
              <span class="checkmark"></span>
              全选
            </label>
            <button class="price-btn">
              <a href="./settlement.html">结算</a>
            </button>
          </div>

        </div>
        <div class="product-info" id="productInfo" ondrop="drop(event)" ondragover="allowDrop(event)">
          <div class="product-list" ondrop="drop(event)" ondragover="allowDrop(event)">
          </div>
          </div>
        </div>
    </div>
  </div>
    <!-- 头部栏 -->
    <header>
      <div class="header-bar">
        <ul>
          <li>在线商城</li>
          <li>论坛精选</li>
          <li>工作站</li>
          <li>开发者支持</li>
          <li>荣誉与奖项</li>
        </ul>
        <div class="log" id="log">
          <img src="./image/svg/user.svg" alt="">
          <span style=" color: hsla(0,0%,100%,.7); font-size: 12px;">用户登录</span>
          <!-- 表单弹窗 -->
          <div class="log-input" style="display: none;">
            <!-- 弹窗内容 -->
            <div class="log-input-contain">
              <div class="drop">
                <div class="content">
                  <h2>登录</h2>
                  <form>
                    <div class="inputBox">
                      <input type="text" placeholder="Username">
                    </div>
                    <div class="inputBox">
                      <input type="password" placeholder="Passwoord">
                    </div>
                    <div class="inputBox">
                      <input type="submit" value="Login">
                    </div>
                  </form>
                </div>
              </div>
              <a href="#" class="btns">忘记密码</a>
              <a href="./static/register.html" class="btns signup" target="_blank">注册</a>
            </div>
          </div>
        </div>
      </div>
      <nav>
        <div class="nav-item">
          <div>首页</div>
          <ul class="nav-ul">
            <li class="nav-li">手机</li>
            <li class="nav-li">官方配件</li>
          </ul>
        </div>
        <div class="nav-item">
          <div>坚果手机</div>
          <ul class="nav-ul">
            <li class="nav-li">热销</li>
            <li class="nav-li">论坛讨论</li>
          </ul>
        </div>
        <div class="nav-item">
          <div>TNT</div>
          <ul class="nav-ul">
            <li class="nav-li">1</li>
            <li class="nav-li">2</li>
          </ul>
        </div>
        <div class="nav-item">
          <div>官方自营</div>
          <ul class="nav-ul">
            <li class="nav-li">天猫</li>
            <li class="nav-li">淘宝</li>
          </ul>
        </div>
        <div class="nav-item">
          <div>服务</div>
          <ul class="nav-ul">
            <li class="nav-li">保修服务</li>
            <li class="nav-li">在线客服</li>
          </ul>
        </div>
        <!-- 阴影盒 -->
        <div id="block"></div>
      </nav>
    </header>
    <!-- 中间内容区域 -->
    <main>
      <!-- banner区域 -->
      <div class="banner">
        <!-- 轮播图主体部分 -->
        <div class="banner-main">
          <img src="./image/banner.jpg" alt="" >
          <img src="./image/banner2.jpg" alt="">
          <img src="./image/banner3.jpg" alt="" >
        </div>
        <div class="banner-btn" style="display: non;">
          <div class="last"> 
            <img src="./image/svg/last.svg" alt="">
          </div>
          <div class="next">
            <img src="./image/svg/next.svg" alt="">
          </div>
        </div>
        <ul class="circle">
          <li style="opacity: 1;" onclick="clickDot(0)"></li>
          <li onclick="clickDot(1)"></li>
          <li onclick="clickDot(2)"></li>
        </ul>
      </div>
      <!-- banner下的商品展示 -->
      <div class="product-show">
        <figure><img src="./image/product/pho.webp" alt=""></figure>
        <figure><img src="./image/product/pho1.webp" alt=""></figure>
        <figure><img src="./image/product/pho2.webp" alt=""></figure>
        <figure><img src="./image/product/pho3.webp" alt=""></figure>
      </div>
      <!-- 热门商品展示 -->
      <div class="hot-product">
        <div class="hot-product-name">
          <h5>热门商品</h5>
          <aside class="right-operation">
            <button class="button-arrow button-arrow-left"></button>
            <button class="button-arrow button-arrow-right"></button>
          </aside>
        </div>
        <div class="span-item">
          <div class="span-item-box" id="dragItem" draggable="true" ondragstart="drag(event)">
        <figure class="itme-cover"><img src="./image/hot-product/坚果R2.png" alt="">
        </figure>
        <article class="item-text">
          <h3>坚果 R1</h3>
          <h5 class="hot-product-title">是下一代手机，更是下一代电脑</h5>
        </article>
        <article class="item-price">￥2699.0</article>
      </div>
      <div class="span-item-box" id="dragItem" draggable="true" ondragstart="drag(event)">
        <figure class="itme-cover"><img src="./image/hot-product/Smartisan TNT 大满足套装.png" alt="">
        </figure>
       <article class="item-text">
        <h3>Smartisan TNT 大满足套装</h3>
        <h5 class="hot-product-title">下一代手机，下一代电脑</h5>
       </article>
        <article class="item-price">￥4999.0</article>
      </div>
      <div class="span-item-box" id="dragItem" draggable="true" ondragstart="drag(event)">
        <figure class="itme-cover"><img src="./image/hot-product/真无线TWS蓝牙耳机 .png" alt="">
        </figure>
       <article class="item-text">
        <h3>Smartisan 真无线TWS蓝牙耳机</h3>
        <h5 class="hot-product-title">抖音文创限量版</h5>
       </article>
        <article class="item-price">￥299.0</article>
      </div>
      <div class="span-item-box" id="dragItem" draggable="true" ondragstart="drag(event)">
        <figure class="itme-cover"><img src="./image/hot-product/蓝牙耳机.png" alt="">
        </figure>
        <article class="item-text">
          <h3>Smartisan 真无线TWS蓝牙耳机</h3>
          <h5 class="hot-product-title">智能配对 开盖即连</h5>
        </article>
        <article class="item-price">￥99.0</article>
      </div>
      <div class="span-item-box" id="dragItem" draggable="true" ondragstart="drag(event)">
        <figure class="itme-cover"><img src="./image/hot-product/打印机.png" alt="">
        </figure>
        <article class="item-text">
          <h3>Smartisan 打印机</h3>
          <h5 class="hot-product-title">是下一代手机，更是下一代电脑</h5>
        </article>
        <article class="item-price">￥2699.0</article>
      </div>
      <div class="span-item-box">
        <figure class="itme-cover"><img src="./image/hot-product/坚果R2.png" alt="">
        </figure>
      <article class="item-text">
        <h3>坚果 R6</h3>
        <h5 class="hot-product-title">是下一代手机，更是下一代电脑</h5>
      </article>
      <article class="item-price">￥2699.0</article>
      </div>
      </div>
      </div>
      <!-- 论坛精选 -->
      <div class="forum-select">
        <div class="forum-select-name">
         <h5>论坛精选</h5>
         <a href=""  class="right-select">
          <button class="floor-btn">
            前往论坛
            <i >&gt;</i>
          </button>
         </a>
        </div>
         <div class="forum-item">
          <div class="forum-item-box">
            <figure class="forum-item-cover"><img src="./image/forum/论坛1.jpg" alt=""></figure>
            <h3>Smartisan OS v8.0.1 更新</h3>
            <p class="decs">Smartisan OS v8.0.1 已于 10 月 20 日推送给坚果 R2 用户。</p>
            <p class="read">
              阅读全文
              <i >&gt;</i>
            </p>
          </div>
          <div class="forum-item-box">
            <figure class="forum-item-cover"><img src="./image/forum/论坛2.jpg" alt=""></figure>
            <h3>坚果 R2 购买及使用常见问题</h3>
            <p class="decs">你关心的各种问题~</p>
            <p class="read">
              阅读全文
              <i >&gt;</i>
            </p>
          </div>
          <div class="forum-item-box">
            <figure class="forum-item-cover"><img src="./image/forum/论坛.jpg" alt=""></figure>
            <h3>我的Smartisan手机</h3>
            <p class="decs">祝新品大卖。</p>
            <p class="read">
              阅读全文
              <i >&gt;</i>
            </p>
          </div>
          <div class="forum-item-box">
            <figure class="forum-item-cover"><img src="./image/forum/论坛3.png" alt=""></figure>
            <h3>体验新鲜出炉，上手体验</h3>
            <p class="decs">新鲜出炉上手体验。</p>
            <p class="read">
             阅读全文
              <i >&gt;</i>
            </p>
          </div>
         </div>
      </div>
    </section>
    </main>
    <!-- 页脚 -->
    <footer>
      <div id="footer_container" class="footer-container">
          <div  class="footer-menu">
            <ul>
              <li  class="items-group">
                <h3 >订单服务</h3>
                <div  class="item-name">
                  <a >购买指南</a>
                  <a  >送货政策</a>
                </div>
              </li>
              <li class="items-group">
                <h3>服务支持</h3>
                <div  class="item-name">
                  <a  >自助服务</a>
                  <a  >维修门店</a>
                </div>
              </li>
              <li class="items-group">
                <h3>媒体中心</h3>
                <div  class="item-name">
                  <a   >新闻动态</a>
                  <a   >官方视频</a>
                  <a  >图片资源</a>
                </div>
              </li>
              <li class="items-group">
                <h3> 关注我们</h3>
                <div  class="item-name">
                  <a >新浪微博</a>
                  <a >官方微信</a>
                  <a >荣誉奖项</a>
                </div>
              </li>
            </ul>
            <div class="footer-service">
              <div class="online">
                <a class="online-btn smartisan-icon info-question" href="">
                  <div class="circle-icon">?</div>
                  <span>在线帮助</span>
                </a>
              </div>
            </div>
          </div>

          <div class="horizontal-line"></div>

          <div  class="footer-info">
            <ul  class="copyright clearfix">
              <li >Copyright © 2023 bear.xu.com 版权所有</li>
              <li> <div class="vertical-line"></div></li>
              <li ><a href="#" style="color: red;">hi</a></li>
              <li> <div class="vertical-line"></div></li>
              <li >
                <a href="#" style="color: red;">hello</a></li>
                <li> <div class="vertical-line"></div></li>
            </ul>
            <ul  class="icp">
              <li ><a href="#">京 ICP 备 19048576 号 - 1</a></li>
              <li> <div class="vertical-line"></div></li>
              <li><img src="./image/公安局.png" style="height: 11px;"></li>
              <li>
                <a>京公网安备 1101243342424号</a>
              </li>
              <li> <div class="vertical-line"></div></li>
              <li ><a href="#">京食药网食备 202312024</a></li>
            </ul>
          </div>
      </div>
    </footer>
  </div>
  <script src="./main.js"></script>
  <script src="./component/shopCart/shopCart.js"></script>
  <script src="./component/banner/main.js"></script>
  <script src="./component/header/main.js"></script>
  <script src="./component/banner/hot-product.js"></script>
</body>
</html>